//Open Street Map地图
let openStreetMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    })
});
//Stamen地图层
let stamenLayer = new ol.layer.Tile({
    source: new ol.source.Stamen({
        layer: 'watercolor'
    })
});
// 高德地图层
let gaoDeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    })
});
// 阿里地图层
let chinaMap = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',    // 矢量地图来源
        format: new ol.format.GeoJSON()                  //解析矢量地图的格式化类
    })
})
 //创建地图
 const map = new ol.Map({
    layers: [
        openStreetMapLayer,
    ],
    view: new ol.View({
        //设置成都为地图中心
        center: [106.980624870461128, 36.161307640513321],
        zoom: 5,
        //投影
        projection: 'EPSG:4326', //WGS84坐标系
    }),
    target: 'map'
})
//绘制图形交互功能
//添加编辑的几何图形
//绘制的集合图形要素

//创建点要素
let pointFeature = new ol.Feature({
    geometry: new ol.geom.Point([0, 0])
});
//创建线要素
let lineFeature = new ol.Feature({
    geometry: new ol.geom.LineString([[0, 0], [0, 0]])
});
//创建面要素
let polygonFeature = new ol.Feature({
    geometry: new ol.geom.Polygon([[[0, 0], [0, 0], [0, 0], [0, 0]]])
});
//实例化一个矢量图层Vector作为绘制层
let source = new ol.source.Vector({
    features: [pointFeature, lineFeature, polygonFeature]
});
let vector = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
                color: '#ffcc33'
            })
        })
    })
})
map.addLayer(vector);  //将绘制层添加到地图容器中

//实现交互编辑
        //定义修改几何图形的功能控件
        let Modify = {
            init: function () {
                //初始化一个交互选择控件，并添加到地图容器
                this.select = new ol.interaction.Select();
                map.addInteraction(this.select);
                //初始化一个交互编辑控件，并添加到地图容器中
                this.modify = new ol.interaction.Modify({
                    features: this.select.getFeatures() //选中的要素集
                });
                map.addInteraction(this.modify);
                //设置激活状态变更的处理
                this.setEvents();
            },
            setEvents: function () {
                const selectedFeatures = this.select.getFeatures(); //选中的要素集
                //添加选中要素变更事件
                this.select.on('change', function () {
                    //遍历选择要素集，返回当前第一个要素（即移除的要素）
                    selectedFeatures.foreach(selectedFeatures.remove, selectedFeatures);
                });
            },
            setActive: function (active) {
                this.select.setActive(active);  //激活选择要素控件
                this.modify.setActive(active);  //激活修改要素控件

            }
        };
        Modify.init();      //初始化几何图形修改控件
        Modify.setActive(true);  //激活集合图形修改控件